import 'dart:typed_data';
import 'dart:ui';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/style.dart';
import 'package:lishi/api.dart';
import 'package:lishi/toast.dart';
import 'package:flutter/material.dart';
import 'package:lishi/global.dart';
import 'package:flutter/rendering.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:permission_handler/permission_handler.dart';

class DetailPage extends StatefulWidget {
  DetailPage({Key key, this.id}) : super(key: key);
  final id;

  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  String _date = '';
  String _title = '';
  String _content = '';
  @override
  void initState() {
    var id = widget.id;
    detail(id).then((res) {
      setState(() {
        _date = res['date'];
        _title = res['title'];
        _content = res['content'];
      });
    });
    super.initState();
  }

  List<Widget> renderText(content) {
    List<Widget> list = [];
    for (var i = 0; i < content.length; i++) {
      var item = content[i];
      list.add(
        Text(
          item,
          maxLines: 3,
          style: TextStyle(
            color: Global.fontColor,
            fontSize: 14,
            fontWeight: FontWeight.w400,
            decoration: TextDecoration.underline,
          ),
        ),
      );
      list.add(SizedBox(height: 10));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return _title == ''
        ? Container(
            color: Global.backgroundColor,
            child: Center(child: CircularProgressIndicator()),
          )
        : Scaffold(
            appBar: AppBar(
              title: Text(
                _date,
                style: TextStyle(
                  color: Global.fontColor,
                  fontSize: 12,
                  fontWeight: FontWeight.bold,
                ),
              ),
              brightness: Brightness.light,
              iconTheme: IconThemeData(color: Global.fontColor),
              backgroundColor: Global.backgroundColor,
              elevation: 0,
            ),
            body: Container(
              height: MediaQuery.of(context).size.height,
              color: Global.backgroundColor,
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Container(
                      padding: EdgeInsets.all(20),
                      child: Center(
                        child: Text(
                          _title,
                          maxLines: 3,
                          style: TextStyle(
                            color: Global.fontColor,
                            fontSize: 16,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.all(12),
                      child: Html(
                        data: _content,
                        style: {
                          "p": Style(
                            color: Global.fontColor,
                            fontWeight: FontWeight.w400,
                            fontSize: FontSize.percent(110),
                            margin: EdgeInsets.fromLTRB(0, 15, 0, 15),
                          ),
                          "img": Style(
                            width: MediaQuery.of(context).size.width,
                          ),
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
  }
}
